
<template>
  <div class="load">
    <el-upload
      class="upload-demo"
      action="http://localhost:9000/upload3"
      multiple
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      list-type="picture"
    >
      <el-button size="small" type="primary">点击上传</el-button>

      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>
    <div>
      <el-button size="small" type="primary" @click="refresh"
        >刷新列表（20203776梁业添）</el-button
      >
      <el-select v-model="value2" placeholder="请选择" @change="getSelect">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="[item.value, item.label]"
        >
        </el-option>
      </el-select>

      <el-card>
        <el-table :data="fileList2" border stripe>
          <el-table-column type="index"></el-table-column>
          <el-table-column label="物流编号" prop="size"></el-table-column>
          <el-table-column label="物流名" prop="fileName"></el-table-column>
          <el-table-column label="物流详细信息" prop="type"></el-table-column>
          <el-table-column label="物流类别" prop="upTime"></el-table-column>
          <!-- <el-table-column label="状态" prop="state">
          scope.row 就是当前行的信息
          <template slot-scope="scope">
            <el-switch v-model="scope.row.state" @change="userStateChanged(scope.row)"></el-switch>
          </template>
        </el-table-column> -->

          <el-table-column label="修改物流信息">
            <template slot-scope="scope">
              <!-- 修改 -->
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="download(scope.row.fileName)"
              ></el-button>
              <!-- 删除 -->
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      fileList: [],
      fileList2: [
        {
          size: '20203776',
          fileName: '梁业添',
          type:'fsdakfdsaf',
          upTime:'冰冻'
        },
        {
          size: '20203777',
          fileName: '梁业添',
          type:'gfdsgsgs',
          upTime:'冰冻'
        },
        // {
        //   size: '20203778',
        //   fileName: '梁业添',
        //   type:'sdgdgsgfhht',
        //   upTime:'快递'
        // },
        // {
        //   size: '20203779',
        //   fileName: '梁业添',
        //   type:'dfgdfgdfhjgfjytj',
        //   upTime:'快递'
        // },
        // {
        //   size: '20203780',
        //   fileName: '梁业添',
        //   type:'trjtrjrjykyiukt',
        //   upTime:'大件'
        // },
        // {
        //   size: '20203781',
        //   fileName: '梁业添',
        //   type:'egrehtehrher',
        //   upTime:'大件'
        // },
        // {
        //   size: '20203782',
        //   fileName: '梁业添',
        //   type:'erherhrehreh',
        //   upTime:'家具'
        // },
        // {
        //   size: '20203783',
        //   fileName: '梁业添',
        //   type:'hrreherhehre',
        //   upTime:'家具'
        // },
      ],
      options: [
        {
          value: "选项1",
          label: "冰冻",
        },
        {
          value: "选项2",
          label: "快递",
        },
        {
          value: "选项3",
          label: "大件",
        },
        {
          value: "选项4",
          label: "家具",
        },
      ],
      value2: "选择物流类别",
    };
    
  },
  created() {
    // 创建页面的时候加载
    this.getFileList();
  },
  methods: {
    refresh(){
      this.getFileList();
      this.options.value2 = '选择文件分类'
      this.$message.success("刷新完成");


    },

    
    getFileListByType(type) {
      // 调用post请求
      // this.queryInfo.methods='allUser'
      // this.queryInfo.queryName=name
      const { data: res } =  this.$http.get("getFileByType?type="+type);
      this.fileList2 = res; 
      // 将返回数据赋值
      console.log("返回的数据" + res);
    },

    getAllGoodsByCategoryId(id) {
    
      const { data: res } =  this.$http.get("getAllGoodsByCategoryId?type="+id);
      this.goodsList2 = res; 
      // 将返回数据赋值
      console.log("返回的数据" + res);
    },







     getSelect: async function (e) {
      //e代表被选中的值，即下拉框的value。由于写的是[item.id,item.label]，现在是包含2个值的数组
      console.log(Array.isArray(e));
      let [value, label] = e; //数组解构：数组解构时数组的元素是按次序排列的，变量的取值由它的位置决定
      console.log(value); //id值
      console.log(label); //label值
      const { data: res } =  await this.$http.get("getFileByType?type="+label);
      // this.fileList2 = res; // 将返回数据赋值
      // console.log("getFileByType返回的数据" + res);

    },

     

    async getFileList() {
    // 20203776梁业添
      const { data: res } = await this.$http.get("/getFileList++");
      this.fileList2 = res; // 将返回数据赋值
      console.log("返回的数据" + res);
    },
    async download(name) {
    
      // 20203776梁业添
      this.$message.success("点击下载");
      // const { data: res } = await this.$http.get("/download?fileId="+id)
      await this.$http
        .get(
          "/download?fileName=" + name,
          // 切记类型 blob
          { responseType: "blob" }
        )
        .then((res) => {
          console.log("打印一下下载返回的数据" + res.data);
          let blob = new Blob([res.data]);
          let url = window.URL.createObjectURL(blob); // 创建 url 并指向 blob

          let a = document.createElement("a");
          a.href = url;
          a.download = name;
          // a.body.appendChild(a)
          a.click();
          window.URL.revokeObjectURL(url); // 释放该 url
        })
        .catch((err) => {
          console.log(err);
        });

      // ;
      //   // 文件下载
      //   axios.get(url, {
      //     responseType: 'blob', // 切记类型 blob
      // })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      
      console.log(file);
    },
  },
};
</script>
  
  <style lang="less" scoped>
</style>